<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="300px">
      <el-menu
        active-text-color="#08132c"
        background-color="#045da9 "
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
      <div class="bigTitle">
        学生实训考勤系统
      </div>
        <el-sub-menu index="1">
          <template #title >
            <el-icon ><el-icon class="firstImg"><house /></el-icon></el-icon>
            <span class="firstTitle">个人信息管理</span>
          </template>
            <el-menu-item index="1-1"><el-icon class="secondImg"><user /></el-icon><span class="secondTitle">基本信息</span></el-menu-item>
            <el-menu-item index="1-2" ><el-icon class="secondImg"><copy-document /></el-icon><span class="secondTitle">实训小组成员</span></el-menu-item>
            <el-menu-item index="1-3"><el-icon class="secondImg"><copy-document /></el-icon><span class="secondTitle">项目得分</span></el-menu-item>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon ><el-icon class="firstImg"><message /></el-icon></el-icon>
          <span  class="firstTitle">项目课程表</span>
        </el-menu-item>
        <el-menu-item index="3" >
          <el-icon><el-icon  class="firstImg"><document /></el-icon></el-icon>
          <span class="firstTitle">作业管理</span>
        </el-menu-item>
        <el-sub-menu index="4">
          <template #title >
            <el-icon ><el-icon class="firstImg"><data-line /></el-icon></el-icon>
            <span class="firstTitle">考勤记录</span>
          </template>
            <el-menu-item index="2-1"><el-icon class="secondImg"><calendar  /></el-icon><span class="secondTitle">考勤项目记录</span></el-menu-item>
            <el-menu-item index="2-2"><el-icon class="secondImg"><pointer /></el-icon><span class="secondTitle">打卡记录</span></el-menu-item>
        </el-sub-menu>
        <el-menu-item index="5">
          <el-icon><el-icon class="firstImg"><alarm-clock /></el-icon></el-icon>
          <span class="firstTitle">请假管理</span>
        </el-menu-item>
      </el-menu>
      </el-aside>
      <el-container>
        <el-header class="head">
          <!--在这里写入头部-->
          Header
          </el-header>
        <el-main class="main">
          <!--在这里写入内容-->
          main
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import {
  User,
  CopyDocument,
  Message,
  House,
  Document,
  DataLine,
  Calendar,
  Pointer,
  AlarmClock
} from '@element-plus/icons-vue'
export default defineComponent({
  components:{
    User,
    CopyDocument,
    Message,
    House,
    Document,
    DataLine,
    Calendar,
    Pointer,
    AlarmClock
  },
  setup(){
    const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
return{
  handleOpen,
  handleClose,
}
  }
})

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
body{
  background-color: #F2F2F2;
}
.head{
  height: 80px !important;
  background-color: #fff;
}
.main{
  margin:20px;
  background-color: #fff;
}
.common-layout{
  height: 100vh;
}
.common-layout .el-container{
  height: 100%;
}
.common-layout .el-menu{
  height: 100%;
}
.bigTitle{
  height: 80px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  line-height: 80px;
  font-weight: bold;
}
.firstTitle{
  font-size: 16px;
  margin-left: 60px;
  font-weight: bold;
}
.firstImg{
  font-size: 25px !important;
  margin-left: 80px !important;
}
.secondTitle{
  margin-left: 10px;
  font-size: 14px;
}
.secondImg{
  margin-left: 60px !important;
}
</style>
